<template>
  <div class="palyShow">
    <!-- 首页导航栏 -->
    <TopBar></TopBar>
    <!-- 轮播图 -->
    <Banner></Banner>
    <!-- 轮播图下的图片 -->
    <!-- <div class="slogan">
      <div class="text">
        “Open Source Development System for Thousands of Lindustties”
      </div>
    </div> -->
    <!-- 开启之旅 -->
    <coreCard></coreCard>
    <!-- 会议-日历 -->
    <newTempalte></newTempalte>
    <!-- tab活动栏 -->
    <div class="tabPlay">
      <div class="tabTitle">
        <div class="tab-title-item"
             v-for="fillItem in fillList"
             :key="fillItem.id"
             @click="latestFill(fillItem)"
             :class="{ tabHight: fillId === fillItem.id }">
          <div class="nav-name">{{ fillItem.name }}</div>
          <div :class="{ line: fillId === fillItem.id }"></div>
        </div>
      </div>
      <div class="tabContent">
        <div class="left">
          <div class="left-item"
               v-for="tabItem in tabList"
               :key="tabItem.id"
               @click="goDetailList(tabItem)">
            <div class="left-img"
                 v-if="tabItem.startTime">
              <div class="left-day">
                {{
                  tabItem.startTime.slice(
                    tabItem.startTime.lastIndexOf(".") + 1
                  )
                }}
              </div>
              <div class="left-mount">
                {{
                  tabItem.startTime
                    .slice(0, tabItem.startTime.lastIndexOf("."))
                    .replace(".", "-")
                }}
              </div>
            </div>
            <div class="line"></div>
            <div class="left-text-wrapper">
              <div class="left-text">{{ tabItem.title }}</div>
            </div>
          </div>
        </div>
        <div class="right"
             v-if="tabList.length > 0">
          <div v-if="tabList[0].advertiseUrl"
               class="image">
            <a :href="tabList[0].advertiseUrl"
               target="_blank">
              <img :src="tabList[0].advertiseImage" />
            </a>
          </div>
          <div v-else
               class="image">
            <a href="javaScript:;">
              <img :src="tabList[0].advertiseImage" />
            </a>
          </div>
          <div class="more"
               @click="goDetail">
            <div class="more-text">查看更多</div>
            <div class="more-btn"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 计数栏 -->
    <div class="computed">
      <div class="content">
        <div class="computed-top">我们正在不断成长</div>
        <div class="computed-bot">
          <div class="toping">
            <div class="left">
              <countTo :startVal="startVal1"
                       :endVal="endVal1"
                       :duration="3000"
                       :separator="null"
                       @reset="resetData"></countTo>
              <div class="left-text">PR</div>
            </div>
            <div class="right">
              <countTo :startVal="startVal2"
                       :endVal="endVal2"
                       :duration="3000"
                       :separator="null"
                       @reset="resetData"></countTo>
              <div class="right-text">Star</div>
            </div>
          </div>
          <div class="centering">
            <div>
              <countTo :startVal="startVal3"
                       :endVal="endVal3"
                       :duration="3000"
                       :separator="null"
                       @reset="resetData"></countTo>
              <div class="centering-text">Committer</div>
            </div>
          </div>
          <div class="botting">
            <div class="left">
              <countTo :startVal="startVal4"
                       :endVal="endVal4"
                       :duration="3000"
                       :separator="null"
                       @reset="resetData"></countTo>
              <div class="left-text">Fork</div>
            </div>
            <div class="right">
              <countTo :startVal="startVal5"
                       :endVal="endVal5"
                       :duration="3000"
                       :separator="null"
                       @reset="resetData"></countTo>
              <div class="right-text">SIG</div>
            </div>
          </div>
        </div>
        <div></div>
      </div>
    </div>
    <!-- 开发版 -->
    <Develop></Develop>
    <!--发行版 广告栏-->
    <!-- <advert></advert> -->
    <!-- 页脚栏 -->
    <Footer></Footer>
  </div>
</template>
<script>
import countTo from "vue-count-to";
import newTempalte from "../components/commonComponent/newTempalte.vue";
import slipeNav from "../components/commonComponent/slipeNav.vue";
import coreCard from "../components/commonComponent/coreCard.vue";
import advert from "../components/commonComponent/advert.vue";
import Footer from "../components/commonComponent/footer.vue";
import TopBar from "../components/commonComponent/topBar.vue";
import Develop from "../components/commonComponent/develop.vue";
import Banner from "../components/commonComponent/banner.vue";
import { mapActions, mapState } from "vuex";
export default {
  components: {
    countTo,
    newTempalte,
    slipeNav,
    coreCard,
    advert,
    Footer,
    TopBar,
    Develop,
    Banner,
  },
  data () {
    return {
      activeIndex: "1",
      isPhone: false,
      titleFlag: true,
      inputFlag: true,
      inputData: "",
      list: [],
      //动态数字
      startVal1: 0,
      endVal1: 0,
      startVal2: 0,
      endVal2: 0,
      startVal3: 0,
      endVal3: 0,
      startVal4: 0,
      endVal4: 0,
      startVal5: 0,
      endVal5: 0,
      fillList: [
        { id: 1, name: "最新活动" },
        { id: 2, name: "博客" },
        { id: 3, name: "新闻" },
      ],
      fillId: 1,
    };
  },
  computed: {
    ...mapState({
      tabList: (state) => state.activity.informationList,
      routerList: (state) => state.devBoard.developmentList,
      contentData: (state) => state.subData.actBatchList,
    }),
  },
  created () {
    let phonewid = document.documentElement.clientWidth < 768;
    this.isPhone = phonewid;
    //活动新闻切换请求
    this.getInformation({ type: this.fillId });
    //二级页分页数据请求
    this.getQueryBatch({
      type: this.fillId,
      pageNum: 1,
      pageSize: 6,
    });
  },
  mounted () {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    ...mapActions([
      "getInformation",
      "getQueryBatch",
    ]),
    handleSelect () { },
    //搜索框
    searchText: function () {
      this.inputFlag = false;
      if (this.isPhone) {
        this.titleFlag = false;
      }
    },
    //搜索框关闭
    close: function () {
      this.inputFlag = true;
      if (this.isPhone) {
        this.titleFlag = true;
      }
    },
    inputContent: function () { },
    // 最新活动
    latestFill: function (item) {
      this.fillId = item.id;
      this.getInformation({ type: item.id });
    },
    //活动三级页
    async goDetailList (item) {
      console.log("kkkkkkkk");
      let res = await this.$axios.post(
        `/knowledge/secondaryPage/updateCount?id=${item.id}&type=1`
      );
      let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
      let isIos = !!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/);
      console.log(item);
      if (item.url) {
        if (isIos) {
          window.location.href = item.url;
        } else {
          window.open(item.url);
        }
      } else {
        this.$router.push({ name: "newDetail", query: { id: item.id } });
      }
    },
    //手机端菜单
    openMenuPhone: function () {
      this.$router.push("/menuBar");
      // this.menuPhone = true;
    },
    //活动更多
    goDetail () {
      // console.log("活动", this.contentData);
      switch (this.fillId) {
        case 1:
          this.$router.push({
            name: "activityList",
            query: { id: this.fillId },
          });
          break;
        case 2:
          this.$router.push({
            name: "blogList",
            query: { id: this.fillId },
          });
          break;
        case 3:
          this.$router.push({
            name: "newList",
            query: { id: this.fillId },
          });
          break;
        default:
          break;
      }
    },
    //动态字延时刷新
    getOffsetTop (obj) {
      let offsetTop = 0;
      while (obj != window.document.body && obj != null) {
        offsetTop += obj.offsetTop;
        obj = obj.offsetParent;
      }
      return offsetTop;
    },
    //动态字延时刷新
    resetData () {
      this.endVal1 = 22893;
      this.endVal2 = 177264;
      this.endVal3 = 1207;
      this.endVal4 = 16835;
      this.endVal5 = 37;
    },
    //动态字延时刷新
    handleScroll () {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let viewport = window.innerHeight / 2;
      let menus = document.querySelector(".computed-bot");
      let offsetTop = this.getOffsetTop(menus) - viewport;
      if (scrollTop >= offsetTop) {
        this.resetData();
      }
    },
    changehandleNav: function () { },
  },
  watch: {},
  destroyed () {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>
<style lang="less" scoped>
@media screen and (min-width: 1032px) {
  .base {
    width: 1032px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .palyShow {
    width: 100%;
    height: 100%;
    // overflow-y: auto;
    background-color: #ffffff;
    // 轮播图下的图片
    .slogan {
      margin: 0 auto;
      display: flex;
      justify-content: center;
      height: 106px;
      margin-bottom: 20px;
      background-image: url("../assets/images/welcome.png");
      .text {
        .base;
        height: 40px;
        font-size: 24px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #00a6f9;
        line-height: 40px;
        letter-spacing: 2px;
        margin: 33px 0;
      }
    }
    // tab活动栏
    .tabPlay {
      .base;
      height: 658px;
      flex-direction: column;
      justify-content: unset;
      margin-bottom: 20px;
      .tabTitle {
        display: flex;
        height: 56px;
        line-height: 56px;
        font-size: 40px;
        font-family: HarmonyOS_Sans_SC_Medium;
        margin-top: 104px;
        .tab-title-item {
          margin-right: 40px;
          height: 56px;
          color: rgba(0, 0, 0, 0.45);
          line-height: 56px;
          cursor: pointer;
          .nav-name {
            margin-bottom: 8px;
          }
        }
        .tabHight {
          height: 56px;
          line-height: 56px;
          color: rgba(0, 0, 0, 0.9);
          margin-bottom: 8;
          .line {
            width: 62px;
            height: 6px;
            margin: 0 auto;
            background: #00a6f9;
            border-radius: 3px;
          }
        }
      }
      .tabContent {
        display: flex;
        margin-top: 67px;
        .left {
          width: 66%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .left-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 51px;
            line-height: 22px;
            background: #fafafa;
            border-radius: 8px;
            border: 1px solid rgba(0, 0, 0, 0.06);
            margin-top: 8px;
            padding: 24px 0;
            white-space: wrap;
            cursor: pointer;
            .left-img {
              width: 48px;
              color: rgba(0, 0, 0, 0.65);
              font-family: HarmonyOS_Sans_SC_Medium;
              margin-left: 24px;
              margin-right: 16px;
              display: flex;
              flex-direction: column;
              align-items: center;
              .left-day {
                height: 28px;
                font-size: 32px;
                line-height: 28px;
              }
              .left-mount {
                height: 18px;
                font-size: 12px;
                line-height: 18px;
              }
            }
            .line {
              width: 1px;
              height: 51px;
              background: rgba(0, 0, 0, 0.06);
            }
            .left-text {
              margin-left: 15px;
              font-size: 16px;
              font-family: HarmonyOS_Sans_SC;
              color: rgba(0, 0, 0, 0.85);
              line-height: 22px;
              word-break: normal;
              word-wrap: break-word;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-box-pack: center;
              -webkit-box-align: center;
              -webkit-line-clamp: 2;
            }
            &:hover {
              background: #00a6f9;
              border-radius: 8px;
              border: 1px solid rgba(0, 0, 0, 0.06);
              filter: blur(0px);
              .left-img {
                color: #fff;
              }
              .left-text {
                color: #fff;
              }
            }
          }
        }
        .right {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-end;
          margin-left: 24px;
          .image {
            margin-top: 8px;
            margin-bottom: 26px;
            height: 216px;
            background: #000000;
            box-shadow: 0px 22px 44px 0px rgba(0, 0, 0, 0.08);
            border-radius: 8px;
            img {
              border-radius: 8px;
            }
          }
          .more {
            width: 140px;
            height: 48px;
            font-size: 16px;
            font-family: HarmonyOS_Sans_SC;
            color: rgba(0, 0, 0, 0.85);
            line-height: 48px;
            margin-top: 20px;
            border-radius: 24px;
            border: 1px solid rgba(0, 0, 0, 0.15);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .more-btn {
              margin-left: 4px;
              width: 24px;
              height: 24px;
              background: url("../assets/images/right.png") no-repeat 100% 100%;
            }
            &:hover {
              background: #00a6f9;
              border: 1px solid #00a6f9;
              color: #fff;
              .more-btn {
                background: url("../assets/images/right-w.png") no-repeat 100%
                  100%;
              }
            }
          }
        }
      }
    }

    // 计数器
    .computed {
      height: 312px;
      background: url("../assets/images/bgcPc.png") no-repeat center top/1920px,
        linear-gradient(to right, #00a6f9 50%, #81bd0a 50%);
      // margin-bottom: 20px;
      .content {
        .base;
        flex-direction: column;
        .computed-top {
          margin-top: 46px;
          height: 45px;
          line-height: 45px;
          font-size: 32px;
          font-family: HarmonyOS_Sans_SC_Medium;
          color: #fff;
        }
        .computed-bot {
          display: flex;
          justify-content: space-between;
          margin-top: 43px;
          margin-left: 24px;
          .toping {
            width: 36%;
            display: flex;
            justify-content: space-between;
            .left {
              // width: 50%;
              height: 66px;
              font-size: 56px;
              color: #ffffff;
              line-height: 66px;
              span {
                font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
              }
              .left-text {
                height: 22px;
                font-size: 16px;
                font-family: HarmonyOS_Sans_SC_Medium;
                color: rgba(255, 255, 255, 0.65);
                line-height: 22px;
                text-align: center;
              }
            }
            .right {
              // width: 50%;
              height: 66px;
              font-size: 56px;
              color: #ffffff;
              line-height: 66px;
              span {
                font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
              }
              .right-text {
                height: 22px;
                font-size: 16px;
                font-family: HarmonyOS_Sans_SC_Medium;
                color: rgba(255, 255, 255, 0.65);
                line-height: 22px;
                text-align: center;
                // margin: 0 auto;
              }
            }
          }
          .centering {
            width: 30%;
            display: flex;
            // flex-direction: column;
            justify-content: space-around;
            height: 66px;
            font-size: 56px;
            font-weight: normal;
            color: #ffffff;
            line-height: 66px;
            span {
              font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
            }
            .centering-text {
              height: 22px;
              font-size: 16px;
              font-family: HarmonyOS_Sans_SC_Medium;
              color: rgba(255, 255, 255, 0.65);
              line-height: 22px;
              text-align: center;
            }
          }
          .botting {
            width: 33%;
            display: flex;
            justify-content: space-between;
            .left {
              height: 66px;
              font-size: 56px;
              color: #ffffff;
              line-height: 66px;
              span {
                font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
              }
              .left-text {
                height: 22px;
                font-size: 16px;
                font-family: HarmonyOS_Sans_SC_Medium;
                color: rgba(255, 255, 255, 0.65);
                line-height: 22px;
                text-align: center;
              }
            }
            .right {
              height: 66px;
              font-size: 56px;
              color: #ffffff;
              line-height: 66px;
              span {
                font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
              }
              .right-text {
                height: 22px;
                font-size: 16px;
                font-family: HarmonyOS_Sans_SC_Medium;
                color: rgba(255, 255, 255, 0.65);
                line-height: 22px;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1032px) {
  .base {
    width: 768px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .palyShow {
    width: 100%;
    height: 100%;
    // overflow-y: auto;
    background-color: #fff;
    // 轮播图下的图片
    .slogan {
      display: flex;
      justify-content: center;
      height: 74px;
      background-color: skyblue;
      margin-bottom: 20px;
      background: url("../assets/images/welcome.png") no-repeat left top;
      background-size: cover;
      .text {
        height: 24px;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #00a6f9;
        line-height: 24px;
        letter-spacing: 1px;
        margin: 25px 0;
      }
    }
    //tab活动栏
    .tabPlay {
      .base;
      height: 658px;
      flex-direction: column;
      justify-content: unset;
      margin-bottom: 20px;
      .tabTitle {
        display: flex;
        height: 56px;
        line-height: 56px;
        font-size: 40px;
        font-family: HarmonyOS_Sans_SC_Medium;
        margin-top: 104px;
        .tab-title-item {
          margin-right: 40px;
          height: 56px;
          color: rgba(0, 0, 0, 0.45);
          line-height: 56px;
          cursor: pointer;
          .nav-name {
            margin-bottom: 8px;
          }
        }
        .tabHight {
          height: 56px;
          line-height: 56px;
          color: rgba(0, 0, 0, 0.9);
          margin-bottom: 8;
          .line {
            width: 62px;
            height: 6px;
            margin: 0 auto;
            background: #00a6f9;
            border-radius: 3px;
          }
        }
      }
      .tabContent {
        display: flex;
        margin-top: 67px;
        .left {
          width: 54%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .left-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 51px;
            line-height: 22px;
            background: #fafafa;
            border-radius: 8px;
            border: 1px solid rgba(0, 0, 0, 0.06);
            margin-top: 8px;
            padding: 24px 0;
            white-space: wrap;
            cursor: pointer;
            .left-img {
              color: rgba(0, 0, 0, 0.65);
              font-family: HarmonyOS_Sans_SC_Medium;
              margin-left: 24px;
              margin-right: 16px;
              display: flex;
              flex-direction: column;
              align-items: center;
              .left-day {
                width: 48px;
                height: 28px;
                font-size: 32px;
                line-height: 28px;
              }
              .left-mount {
                width: 48px;
                height: 18px;
                font-size: 12px;
                line-height: 18px;
              }
            }
            .line {
              width: 1px;
              height: 51px;
              background: rgba(0, 0, 0, 0.06);
            }
            .left-text {
              margin-left: 15px;
              font-size: 16px;
              font-family: HarmonyOS_Sans_SC;
              color: rgba(0, 0, 0, 0.85);
              line-height: 22px;
              word-break: normal;
              word-wrap: break-word;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-box-pack: center;
              -webkit-box-align: center;
              -webkit-line-clamp: 2;
            }
            &:hover {
              background: #00a6f9;
              border-radius: 8px;
              border: 1px solid rgba(0, 0, 0, 0.06);
              filter: blur(0px);
              .left-img {
                color: #fff;
              }
              .left-text {
                color: #fff;
              }
            }
          }
        }
        .right {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-end;
          margin-left: 24px;
          .image {
            margin-top: 8px;
            margin-bottom: 26px;
            height: 216px;
            background: #000000;
            box-shadow: 0px 22px 44px 0px rgba(0, 0, 0, 0.08);
            border-radius: 8px;
            img {
              border-radius: 8px;
            }
          }
          .more {
            width: 140px;
            height: 48px;
            font-size: 16px;
            font-family: HarmonyOS_Sans_SC;
            color: rgba(0, 0, 0, 0.85);
            line-height: 48px;
            margin-top: 20px;
            border-radius: 24px;
            border: 1px solid rgba(0, 0, 0, 0.15);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .more-btn {
              margin-left: 4px;
              width: 24px;
              height: 24px;
              background: url("../assets/images/right.png") no-repeat 100% 100%;
            }
            &:hover {
              background: #00a6f9;
              border: 1px solid #00a6f9;
              color: #fff;
              .more-btn {
                background: url("../assets/images/right-w.png") no-repeat 100%
                  100%;
              }
            }
          }
        }
      }
    }

    // 计数器
    .computed {
      height: 312px;
      background: url("../assets/images/bgcPc.png");
      background-size: 100% 100%;
      .content {
        .base;
        flex-direction: column;
        .computed-top {
          margin-top: 46px;
          height: 45px;
          font-size: 32px;
          font-family: HarmonyOS_Sans_SC_Medium;
          color: #ffffff;
          line-height: 45px;
        }
        .computed-bot {
          display: flex;
          justify-content: space-between;
          margin-top: 43px;
          margin-left: 24px;
          .toping {
            width: 43%;
            display: flex;
            justify-content: space-between;
            .left {
              height: 66px;
              font-size: 56px;
              color: #ffffff;
              line-height: 66px;
              margin-left: -25px;
              span {
                font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
              }
              .left-text {
                height: 22px;
                font-size: 16px;
                font-family: HarmonyOS_Sans_SC_Medium;
                color: rgba(255, 255, 255, 0.65);
                line-height: 22px;
                text-align: center;
              }
            }
            .right {
              height: 66px;
              font-size: 56px;
              color: #ffffff;
              line-height: 66px;
              span {
                font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
              }
              .right-text {
                height: 22px;
                font-size: 16px;
                font-family: HarmonyOS_Sans_SC_Medium;
                color: rgba(255, 255, 255, 0.65);
                line-height: 22px;
                text-align: center;
              }
            }
          }
          .centering {
            width: 22%;
            display: flex;
            justify-content: space-around;
            height: 66px;
            font-size: 56px;
            color: #ffffff;
            line-height: 66px;
            span {
              font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
            }
            .centering-text {
              height: 22px;
              font-size: 16px;
              font-family: HarmonyOS_Sans_SC_Medium;
              color: rgba(255, 255, 255, 0.65);
              line-height: 22px;
              text-align: center;
            }
          }
          .botting {
            width: 35%;
            display: flex;
            justify-content: space-between;
            .left {
              height: 66px;
              font-size: 56px;
              color: #ffffff;
              line-height: 66px;
              span {
                font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
              }
              .left-text {
                height: 22px;
                font-size: 16px;
                font-family: HarmonyOS_Sans_SC_Medium;
                color: rgba(255, 255, 255, 0.65);
                line-height: 22px;
                text-align: center;
              }
            }
            .right {
              height: 66px;
              font-size: 56px;
              color: #ffffff;
              line-height: 66px;
              span {
                font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
              }
              .right-text {
                height: 22px;
                font-size: 16px;
                font-family: HarmonyOS_Sans_SC_Medium;
                color: rgba(255, 255, 255, 0.65);
                line-height: 22px;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .base {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .palyShow {
    width: 100%;
    height: 100%;
    // overflow-y: auto;
    background-color: #fff;
    .slogan {
      .base;
      height: 106px;
      text-align: center;
      background-image: url("../assets/images/welcome.png");
      margin-bottom: 20px;
      .text {
        height: 48px;
        font-size: 16px;
        padding: 30px 21px 28px 20px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #00a6f9;
        line-height: 24px;
        letter-spacing: 1px;
      }
    }
    // tab活动栏
    .tabPlay {
      padding: 0 12px;
      .base;
      flex-direction: column;
      justify-content: unset;
      .tabTitle {
        display: flex;
        height: 28px;
        line-height: 28px;
        padding-top: 24px;
        font-family: HarmonyOS_Sans_SC_Medium;
        .tab-title-item {
          margin-right: 24px;
          height: 56px;
          font-size: 20px;
          color: rgba(0, 0, 0, 0.45);
          line-height: 28px;
          .nav-name {
            margin-bottom: 8px;
          }
        }
        .tabHight {
          height: 56px;
          font-size: 20px;
          line-height: 28px;
          color: rgba(0, 0, 0, 0.9);
          .line {
            width: 40px;
            height: 3px;
            margin: 0 auto;
            background: #00a6f9;
            border-radius: 3px;
          }
        }
      }
      .tabContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 16px;
        .left {
          width: 100%;
          .left-item {
            width: 100%;
            display: flex;
            flex-direction: row;
            height: 99px;
            line-height: 22px;
            background: #fafafa;
            border-radius: 8px;
            border: 1px solid rgba(0, 0, 0, 0.06);
            margin-top: 8px;
            padding: 24px 0;
            white-space: wrap;
            box-sizing: border-box;
            .left-img {
              color: rgba(0, 0, 0, 0.65);
              text-align: center;
              font-family: HarmonyOS_Sans_SC_Medium;
              margin: 0 16px;
              .left-day {
                width: 56px;
                height: 28px;
                font-size: 32px;
                line-height: 28px;
              }
              .left-mount {
                width: 56px;
                height: 18px;
                font-size: 12px;
                line-height: 18px;
              }
            }
            .line {
              width: 1px;
              height: 51px;
              background: rgba(0, 0, 0, 0.06);
            }
            .left-text-wrapper {
              display: flex;
              align-items: center;
              .left-text {
                margin: 0 16px;
                font-size: 16px;
                font-family: HarmonyOS_Sans_SC;
                color: rgba(0, 0, 0, 0.85);
                line-height: 22px;
                word-break: normal;
                word-wrap: break-word;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-box-pack: center;
                -webkit-box-align: center;
                -webkit-line-clamp: 3;
              }
            }
          }
        }
        .right {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          margin-top: 8px;
          padding-bottom: 24px;
          .image {
            width: 100%;
            height: 100%;
            img {
              width: 100%;
              border-radius: 8px;
            }
          }
          .more {
            width: 140px;
            height: 48px;
            font-size: 16px;
            font-family: HarmonyOS_Sans_SC;
            color: rgba(0, 0, 0, 0.85);
            line-height: 48px;
            margin-top: 20px;
            border-radius: 24px;
            border: 1px solid rgba(0, 0, 0, 0.15);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .more-btn {
              margin-left: 4px;
              width: 24px;
              height: 24px;
              background: url("../assets/images/right.png") no-repeat 100% 100%;
            }
            &:hover {
              background: #00a6f9;
              border: 1px solid #00a6f9;
              color: #fff;
              .more-btn {
                background: url("../assets/images/right-w.png") no-repeat 100%
                  100%;
              }
            }
          }
        }
      }
    }
    // 计数器
    .computed {
      height: 312px;
      background: url("../assets/images/bgcPhone.png");
      background-size: 100% 100%;
      .content {
        .base;
        flex-direction: column;
        align-items: center;
        .computed-top {
          padding-top: 24px;
          padding-bottom: 32px;
          height: 28px;
          font-size: 20px;
          font-family: HarmonyOS_Sans_SC_Medium;
          color: #ffffff;
          line-height: 28px;
        }
        .computed-bot {
          display: flex;
          flex-direction: column;
          width: 100%;
          .toping {
            display: flex;
            justify-content: space-around;
            height: 63px;
            .left {
              // width: 50%;
              height: 38px;
              font-size: 32px;
              color: #ffffff;
              line-height: 38px;
              span {
                font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
              }
              .left-text {
                height: 17px;
                font-size: 12px;
                font-family: PingFangSC-Medium, PingFang SC;
                color: rgba(255, 255, 255, 0.65);
                line-height: 17px;
                text-align: center;
              }
            }
            .right {
              // width: 50%;
              height: 38px;
              font-size: 32px;
              color: #ffffff;
              line-height: 38px;
              span {
                font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
              }
              .right-text {
                height: 17px;
                font-size: 12px;
                font-family: HarmonyOS_Sans_SC_Medium;
                color: rgba(255, 255, 255, 0.65);
                line-height: 17px;
                text-align: center;
              }
            }
          }
          .centering {
            display: flex;
            justify-content: center;
            height: 38px;
            font-size: 32px;
            color: #ffffff;
            line-height: 38px;
            span {
              font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
            }
            .centering-text {
              height: 17px;
              font-size: 12px;
              font-family: HarmonyOS_Sans_SC_Medium;
              color: rgba(255, 255, 255, 0.65);
              line-height: 17px;
              text-align: center;
            }
          }
          .botting {
            padding-top: 17px;
            display: flex;
            justify-content: space-around;
            margin-left: -14px;
            height: 63px;
            .left {
              height: 38px;
              font-size: 32px;
              color: #fff;
              line-height: 38px;
              span {
                font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
              }
              .left-text {
                height: 17px;
                font-size: 12px;
                font-family: HarmonyOS_Sans_SC_Medium;
                color: rgba(255, 255, 255, 0.65);
                line-height: 17px;
                text-align: center;
              }
            }
            .right {
              height: 38px;
              font-size: 32px;
              font-weight: normal;
              color: #ffffff;
              line-height: 38px;
              span {
                font-family: HarmonyOS_Sans_Condensed_Bold_Italic;
              }
              .right-text {
                height: 17px;
                font-size: 12px;
                font-family: HarmonyOS_Sans_SC_Medium;
                color: rgba(255, 255, 255, 0.65);
                line-height: 17px;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
</style>
